<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-04-03 11:18:58
-->
<route lang="json5" type="home">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '告警列表',
    disableScroll: false,
  },
}
</route>
<template>
  <view class="deviceList">
    <view class="topBox" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
      <uv-navbar
        leftText="告警列表"
        fixed
        leftIconColor="#fff"
        leftIconSize="0"
        :bgColor="bgColor"
      />
      <uv-gap height="88rpx" bgColor=""></uv-gap>
      <view class="bg">
        <uv-image
          width="100%"
          height="100%"
          mode="aspectFill"
          duration="450"
          :fade="true"
          :src="bg"
        ></uv-image>
      </view>
    </view>
    <view class="list">
      <view
        class="item flex grid-justify-between"
        v-for="(item, i) in 10"
        :key="i"
        @click="toDetail(item)"
      >
        <view class="left">
          <view class="title font-size-[38rpx] flex color-[#354970] flex-items-center">
            XG2409001
            <view class="error ml-2" :class="i > 3 ? 'heavy' : 'light'">{{
              i > 3 ? '严重' : '预警'
            }}</view>
          </view>
          <view class="font-size-3 mt-2 color-[#6E7D99]">单体电池压差过大 2024/01/25 12:00:33</view>
        </view>
        <uv-icon name="arrow-right"></uv-icon>
      </view>
    </view>
    <!-- <view v-else class="nodata">
      <uv-image :src="nodata" mode="aspectFit" width="300rpx" height="250rpx" />
      <view class="tips">暂无数据</view>
      没有内容，请刷新或返回首页
    </view> -->
    <gc-tabbar />
  </view>
</template>

<script setup lang="ts" name="energyStorage">
import bg from '@/static/images/icon/bg.png'
import nodata from '@/static/images/icon/nodata.png'
const { safeAreaInsets, windowHeight } = uni.getSystemInfoSync()
const popupClassRef = ref()
const bgColor = ref('rgba(154,202,252,0)')
onPageScroll(({ scrollTop }) => {
  bgColor.value = scrollTop > 10 ? '#226cff' : 'rgba(154,202,252,0)'
})
const toDetail = (item: any) => {
  uni.navigateTo({ url: '/pages/alarm/detail' })
}
onMounted(() => {})
</script>

<style scoped lang="scss">
.deviceList {
  padding-bottom: 40rpx;

  .topBox {
    position: relative;
    height: 127rpx;
    background: #226cff;
  }

  .bg {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .nodata {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 500rpx);
    margin: -15px 0 0;
    font-size: 22rpx;
    color: #6e7d99;
    background: #fff;
    border-radius: 35rpx;

    .tips {
      padding: 72rpx 0 30rpx;
      font-size: 40rpx;
      color: #226cff;
    }
  }

  .list {
    position: relative;
    z-index: 2;
    min-height: 100px;
    padding: 0 30rpx 160rpx;
    margin-top: -15px;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;

    .item {
      padding-top: 40rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #eee;

      .error {
        height: 20rpx;
        padding: 10rpx 20rpx;
        font-size: 20rpx;
        line-height: 20rpx;
        border-radius: 40rpx;

        &.heavy {
          color: #f32020;
          background: #ffecec;
        }

        &.light {
          color: #f4ac01;
          background: #fff5dd;
        }
      }
    }
  }
}
</style>
